<template>
    <el-card style="width: 100%" header="我的订单">
        <el-table v-loading="loading" :data="list" border size="mini">
            <el-table-column prop="orderNo" label="订单号" align="center">
                <template slot-scope="{row}"><el-link @click="toDetail">{{row.orderNo}}</el-link></template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" align="center"> </el-table-column>
            <el-table-column prop="payment" label="订单总金额" align="center"> </el-table-column>
            <el-table-column prop="statusDesc" label="订单状态" align="center"> </el-table-column>
            <el-table-column label="操作" align="center">
                <el-button size="mini"> 确认收货</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :pageSize="pageSize"
            :total="total"
            @current-change="handleChange"
        >
        </el-pagination>
        <OrderDetail ref="detailRef"/>
    </el-card>
</template>
<script>
import OrderDetail from "../components/OrderDetail"
export default {
    name: 'order-list',
    components:{OrderDetail},
    data() {
        return {
            loading: false,
            list: [],
            pageSize: 10,
            pageNum: 1,
            total: 0
            // showNextPage: true // 加载更多：是否显示按钮(即数据加载完了，没有更多则不显示按钮)
            // busy: false // 滚动加载，是否触发
        };
    },
    mounted() {
        this.getOrderList();
    },
    methods: {
        getOrderList() {
            this.loading = true;
            // this.busy = true
            this.$http
                .get('/orders')
                .then((res) => {
                    this.loading = false;
                    this.list = res.list;
                    // 第二种和第三钟方式(滚动加载和点击按钮加载更多)：请求的数据条数拼接，而不是替换成新的
                    // this.list = this.list.concat(res.list)
                    this.total = res.total;
                    // this.showNextPage = res.hasNextPage
                    // this.busy = false
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        toDetail(orderNo) {
           this.$refs.detailRef.initData()
        },
        // 第一种方法：分页器
        handleChange(pageNum) {
            this.pageNum = pageNum;
            this.getOrderList();
        }
    }
};
</script>
<style lang="scss">
.pagination {
    margin-top: 15px;
    text-align: right;
}
</style>
